<template>
  <div class="todo">
    <div class="title" v-if="title" @click="showDate">
      <span></span>
      <span class="name">{{title}}</span>
      <span class="btn" @click.stop="reset">重置</span>
    </div>
    <div v-else class="title none" @click="showDate">
      选择时间
    </div>
    <calendar mode="during"  @change="changeDate"  :show.sync="dateShow"  />

    <div class="types">

      <div class="total white-block">
        <div class="check-box" v-for="(item,index) in statusOptions" :key="index">
          <span class="label">{{item.name}}</span>
          <input @click.stop type="checkbox" :value="index" v-model="filterStatus"/>
        </div>
      </div>

      <div class="total white-block">
        <div class="check-box" v-for="(item,index) in levelOptions" :key="index">
          <span class="label">{{item}}</span>
          <input @click.stop type="checkbox" :value="index" v-model="filterLevel"/>
        </div>
      </div>

      <div class="desc">未完成/待考核/已完成/总数量/总评分/平均分</div>
      <div class="white-block type"  v-for="(item,index) in sumList" :key="index">
        <span class="type-name">{{item.userName}}-{{levelNames[item.level]}}</span>
<!--        <span class="type-name">{{levelNames[item.level]}}</span>-->
        <div class="num">
          {{item.todo}}/{{item.wait}}/{{item.score}}/{{item.total}}/{{item.point}}/{{item.avg}}
        </div>

        <div class="check-box" @click="toDetail(item.userId,item.userName)">
          <span class="label">详情</span>
        </div>

      </div>

    </div>
  </div>
</template>

<script>
import { sumByDate } from '@/api/todo'
import { parseTime, str2Date } from '@/util/time'
export default {
  created () {
    this.init()
  },
  activated () {

  },
  beforeRouteEnter (to, from, next) {
    next()
  },
  methods: {
    toDetail (userId, userName) {
      this.$router.push({
        path: '/todo/record',
        query: {
          dateStart: this.dateStart,
          dateEnd: this.dateEnd,
          userId: userId,
          userName: userName,
          top: true
        }
      })
    },
    init () {
      // 重置状态
      this.filterStatus = []
      // 重置时间
      this.dateStart = new Date().toLocaleDateString()
      this.dateEnd = new Date().toLocaleDateString()
      // 获取数据
      this.sum()
    },
    str2Date (date) {
      return str2Date(date)
    },
    reset () {
      this.dateStart = null
      this.dateEnd = null
      this.sum()
    },
    showDate () {
      this.dateShow = true
    },
    changeDate (dates) {
      if (dates.length === 2) {
        this.dateStart = dates[0].toDate().toLocaleDateString()
        this.dateEnd = dates[1].toDate().toLocaleDateString()
        this.dateShow = false
        this.sum()
      }
    },
    sum () {
      if (!this.top) {
        sumByDate(parseTime(this.dateStart), parseTime(this.dateEnd)).then(res => {
          this.todoSum = res.data
        })
      }
    },
    detail (item) {
    }
  },
  computed: {
    title () {
      if (this.dateStart != null && this.dateEnd != null) {
        if (this.dateStart === this.dateEnd) {
          return this.dateStart + ' ' + this.weekName[new Date(this.dateStart).getDay()]
        } else {
          return this.dateStart + '--' + this.dateEnd
        }
      }
      return null
    },
    statusOptions () {
      const statusOptions = [{
        name: '待完成', num: 0
      },
      {
        name: '待考核', num: 0
      },
      {
        name: '已评分', num: 0
      }
      ]
      // this.todoSum.forEach(sum => {
      //   if (statusOptions[sum.status]) {
      //     statusOptions[sum.status].num++
      //   }
      // })
      return statusOptions
    },
    sumList () {
      return this.todoSum.filter(sum => {
        if (this.filterStatus.length == 0 && this.filterLevel.length == 0) {
          return true
        }

        for (let i = 0; i < this.filterStatus.length; i++) {
          if (this.filterStatus[i] == 0 && sum.todo > 0) {
            return true
          } else if (this.filterStatus[i] == 1 && sum.wait > 0) {
            return true
          } else if (this.filterStatus[i] == 2 && sum.score > 0) {
            return true
          } else {
            return false
          }
        }

        for (let i = 0; i < this.filterLevel.length; i++) {
          if ((this.filterLevel[i] + 2) == sum.level) {
            return true
          }
        }
      })
    }
  },
  data () {
    return {
      levelNames: ['会员', '药店', '终端', '主管', '经理', '总监'],
      levelOptions: ['终端', '主管', '经理'],
      statusText: ['待完成', '待考核', '已评分', '已删除'],
      weekName: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
      dateShow: false,
      filterStatus: [],
      filterLevel: [],
      todoSum: [],
      dateStart: null,
      dateEnd: null
    }
  }
}
</script>

<style scoped lang="stylus">
.check-box
  display flex
  align-items center
  justify-content center
  .label
    margin-right 10px
.todo
  padding 10px 10px
  .title
    padding 0 10px
    display flex
    justify-content space-between
    align-items center
    height 60px
    color #55545D
    font-size 22px
    box-shadow: 0px 3px 7px 0px rgba(89, 88, 87, 0.52);
    .btn
      color red
      font-size 14px
    &.none
      justify-content center
  .users
    padding 0 10px
    display flex
    align-items center
    justify-content space-between
    font-size 16px
    color #55545D
    margin-top 10px
  .time-filter
    padding 0 10px
    font-size 18px
    color #55545D
    display flex
    justify-content space-between
    align-items center
    margin-top 20px

    .place
      font-size 16px
      color red
  .types
    border-top 1px solid #ECEAEA
    margin-top 20px
    padding-bottom 20px
    .desc
      display flex
      align-items center
      justify-content center
      font-size 10px
      color #989898
      padding 10px 0
    .total
      display flex
      align-items center
      justify-content space-between
      padding 0 10px
      font-size 14px
      color #55545D
      margin-bottom 20px
    .type
      margin-bottom 10px
      display flex
      align-items center
      justify-content space-between
      padding 0 10px
      font-size 14px
      background-color #ECEAEA
      color #55545D
      .type-name
        min-width 80px
      .del
        color red
      .type-edit
        color red
      .radios
        display flex
        align-items center
        input
          margin-right 10px
        .false
          margin-left 20px
      &.done
        background-color white
      .week-date
        color #595857
  .btns
    font-size 18px
    color #55545D
    display flex
    justify-content space-between
    position fixed
    bottom 10px
    left 0
    right 0
    padding 0 10px
    .btn
      background-color white
      border 1px 1px 1px 1px solid #595857
      box-shadow: 0px 3px 7px 0px rgba(89, 88, 87, 0.52);
      width 100px
      height 40px
      display flex
      justify-content center
      align-items center
  .todos
    border-top 1px solid #ECEAEA
    padding-top 20px
    .todo
      font-size 14px
      color #55545D
      display flex
      align-items center
      justify-content space-between
      padding 0 10px
      margin-bottom 10px
      &.done
        background-color #ECEAEA
</style>
